QSS |
您所在的位置:网站首页 › qt qlabel设置渐变色 › QSS |
QSS即Qt StyleSheet(Qt样式表)的简称,是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮 每条QSS样式都由两部分组成:1. 选择器,该部分指定要美化的控件 2. 声明,该部分指定要在控件上使用的属性 声明: 样式:import sysfrom PyQt5.QtWidgets import QApplication, QWidget,QLabel,QPushButtonclass BTN(QPushButton): passclass Demo(QWidget): def __init__(self): super(Demo, self).__init__() self.resize(300,400) self.setWindowTitle('QSS学习') label=QLabel('测试文本',self) label.move(50,50) label.resize(100,100) self.setStyleSheet('QLabel{border-style:solid;border-width:16;border-color: red yellow blue green;}') #设置样式 #样式是个键值对,用;隔开 # background-color 设置背景色 # color 前景色 # font-size:20px 字体大小 # font-family:黑体 # border:3px solid red 边框---上下左右可以分开设置 # border---四条边相同样式 #border-style 四条线统一设置--上 右 下 左 #四条边分开设置 border-top-style border-right-style border-bottom-style border-left-style # 3px 边框像素---宽度-单位:像素,也可以em,1em=16px #border-width 上 右 下 左 ----- 边框宽度 #分开设置:border-top-width border-right-width border-bottom-width border-left-width # solid 实线----边框样式 dotted 点状边框 none无边框 dashed 虚线 # double 双线 groove 定义3D凹槽边框。其效果取决于border-color的值 # ridge 定义3D垄状边框。其效果取决于 border-color的值 # inset 定义3D inset边框。其效果取决于 border-color的值 # outset 定义3D outset边框。其效果取决于 border-color的值 # red 红色 #统一设置 border-color 上 右 下 左 #四条线分开设置 border-top-color border-right-color border-bottom-color border-left-color #颜色 可以用rgb(2,2,2) 也可以 #00FF00 #常用颜色 javascript:void(0) # width: 40px 设置宽度 # height: 40px 设置高度 # image:url(./大象.png) 添加图片 # margin 外边距 # padding 内边距 # content 内容矩形 # 设置多个属性用;隔开if __name__ == '__main__': app = QApplication(sys.argv) demo = Demo() demo.show() sys.exit(app.exec_())渐变色: 线性渐变:qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 white, stop: 0.4 gray, stop:1 yellow)x1:0, y1:0, x2:1, y2:0 决定方向stop: 0.4 gray 定义位置的颜色 把整条线分层10分,0.4的位置是gray颜色 辐射渐变: qradialgradient(cx:0.7, cy:0.7, radius:0.5, fx:0.5, fy:0.5, stop:0 red, stop:1 blue) cx:0.7, cy:0.7 是圆心位置 radius:0.5 是半径 fx:0.5, fy:0.5 光源位置 stop:0 red 位置的颜色 角度渐变: qconicalgradient(cx:0.5, cy:0.5, angle:90, stop:0 red, stop:1 blue) cx:0.5, cy:0.5 圆心位置 angle:90 起始角度 stop:0 red 位置颜色 边框圆角 : 四个边框统一设置:---四个角相同 border-radius:20px 圆角半径 单位 像素 四个边框分别设置: border-top-left-radius:20px border-top-right-radius border-bottom-right-radius border-bottom-left-radius 边框图片: border-image:url(./边框图片.png) 30 30 30 30 stretch;border-width:30
四个角不会变 30 30 30 30 裁剪值 上右下左 中间块的处理方式:stretch 拉伸 round 平铺 repeat 重复 border-width:30 边框宽度----必须有 外边距: 统一设置 margin 上 右 下 左 分开设置:margin-top margin-right margin-bottom margin-left 常用取值 16px 1em resize调整的是包含外边距的尺寸 内边距: 统一设置 padding 上 右 下 左 分开设置 padding-top padding-right padding-bottom padding-left 常用取值 16px 1em 背景: background-color:yellow 背景颜色 background-color:rgb(255,0,0) background-color:#FF0000 常用颜色 javascript:void(0)background-image:url(./大象.png);background-repeat:no-repeat 背景图片 背景图片的处理方式:background-repeat:no-repeat 不重复 background-repeat:repeat-x x方向重复 background-repeat:repeat-xy xy方向重复 background-position:right top 图片位置 top left right bottom background-origin:content 参照位置---图片贴着谁 padding 默认 content border margin background-clip:padding 背景裁剪---在指定范围外的都裁剪掉 padding 默认 content border background-attachment :scroll 背景图像是否跟随滚动 scroll 跟随滚动 fixed 不跟随滚动 字体: 分开设置: font-family:隶书 设置字体 font-size:32px 字体大小 单位 16px=1em font-style:italic 字体样式: normal 默认值.显示一个标准的字体样式 italic 显示一个斜体的字体样式 oblique 显示一个倾斜的字体样式 font-weight:normal 字体重量 normal 默认值。定义标准的字符 bold 定义粗体字符 bolder 定义更粗的字符 lighter 定义更细的字符 100 200 300 400 500 600 700 800 900 400 等同于 normal,而 700 等同于 bold color:red 前景色 最小最大尺寸: min-width min-height max-width max-height 复合控件的子控件: QSpinBox::up-button{Subcontrol-Position:left top} 选择器 QSpinBox::up-button 子控件向上按钮 Subcontrol-Position:left top 子控件位置 Subcontrol-Origin:border 子控件相对父控件的参照位置 bottom:10px 移动10像素 bottom 向底部移动 top left right position: relative; 相对位置移动 position: absolute; 绝对位置移动 三方库样式表 :---qdarkgraystyle 安装:文件--->设置---> --->输入 qdarkgraystyle---->--->安装成功显示 我的报错 不知为何 选择器: import sysfrom PyQt5.QtWidgets import QApplication, QWidget,QVBoxLayout,QLabel,QPushButton,QCheckBoxclass BTN(QPushButton): passclass Demo(QWidget): def __init__(self): super(Demo, self).__init__() self.resize(300,400) self.setWindowTitle('QSS学习') self.setup_ui() def setup_ui(self): box1=QWidget(self) box1.setObjectName('box1') box3=QWidget(box1) box3.setStyleSheet('.QWidget{background-color:yellow}') box2 = QWidget(self) #box1.setStyleSheet('color: red') #设置样式 #注意:包括控件本身和所有子控件 #color 前景色 bl = QVBoxLayout() self.setLayout(bl) bl.addWidget(box1) bl.addWidget(box2) label1 = QLabel('标签1', box1) label1.setObjectName('lm') # 设置ObjectName label1.setProperty('notice_level','error') #给控件设置自定义属性和属性值 label1.move(50, 50) btn1 = QPushButton('按钮1', box1) btn1.move(150, 50) btn=BTN('按钮',box1) btn.move(150,100) label11 = QLabel('标签11', box3) label2 = QLabel('标签2', box2) label2.move(50, 50) btn2 = QPushButton('按钮2', box2) btn2.move(150, 50) btn2.setObjectName('lm') label2.setProperty('notice_level', 'warning') # 给控件设置自定义属性和属性值 #选择器:---指明样式对什么控件使用 #通配符选择器--匹配所有控件 #box1.setStyleSheet('* {background-color: yellow;}') #* 表示所有控件 #类型选择器---通过控件类型来匹配控件 #self.setStyleSheet('.QPushButton{background-color: yellow}') #QPushButton 表示匹配QPushButton类控件及其子类控件 #.QPushButton 表示匹配QPushButton类控件---不包括子类控件 #ID选择器:----通过ObjectName属性进行选择--使用# #self.setStyleSheet('#lm{background-color: yellow}') #ObjectName属性为lm的控件 #self.setStyleSheet('QPushButton#lm{background-color: yellow}') #在QPushButton类控件当中ObjectName属性为lm的控件 #属性选择器:--根据setProperty自定义属性和属性值进行选择--使用[] #self.setStyleSheet('.QLabel[notice_level]{background-color: blue}.QLabel[notice_level="error"]{border:3px solid red} .QLabel[notice_level="warning"]{border:3px solid yellow}') #[notice_level] 具有notice_level属性 #[notice_level="error"] notice_level属性值是error的 #包含选择器:---用空格 #self.setStyleSheet('QWidget#box1 QLabel {background-color: blue}') #QWidget#box1中包含的QLabel类控件及其所有子控件--直接包含 间接包含都行 #直接包含选择器---- 用 > #self.setStyleSheet('QWidget#box1 >QLabel {background-color: blue}') # QWidget#box1中包含的QLabel类控件及其子控件--只能直接包含不包括间接包含 #子控件选择器:---复合控件中的控件--用:: cb1=QCheckBox('物理',box2) cb1.move(50,100) #self.setStyleSheet('QCheckBox::indicator {image:url(./大象.png);width:40px;height:40px;}') #::indicator 表示复选框中的指示器--勾选框 #QCheckBox QRadioButton 都有indicator控件 #QComboBox 有drop-down控件 #QSpinBox,QDateEdit,QDateTimeEdit,QTimeEdit 有up-button down-button up-arrow down-arrow控件 #其它看 https://www.cnblogs.com/liming19680104/p/11146956.html #self.setStyleSheet('#lm,#box1{background-color: blue}') # 上面选择器分类可以组合使用, 使用逗号隔开即可 #伪状态:---在什么状态下使用样式表---使用: #self.setStyleSheet('QPushButton#lm:hover{background-color: yellow} QPushButton#lm:pressed{background-color: blue}') #:hover 鼠标悬停在上面时 #:pressed 控件被按下时 #:checked 控件被选中 #:unchecked 控件未被选中 #:indeterminate checkBox或者radioButton被部分选中(半选中) #:focus 控件获取焦点 #:disabled 控件失效 #:enabled 控件有效 #:on 控件处于on状态---选择按钮开 #:off 控件处于off状态 #这部分不写时就是普通状态时 #注意:不同的控件可能有某种特定的伪状态, 无法通用, 具体查看官方文档 #! 可以否定 :!checked 没有被选中时 #可以多个连用 :hover:checked 鼠标在上且被选中时 #例子 #self.setStyleSheet('QCheckBox::indicator{width:40;height:40} QCheckBox::indicator:checked{image:url(./对勾.png)} QCheckBox::indicator:unchecked{image:url(./圆圈.png)}')if __name__ == '__main__': app = QApplication(sys.argv) demo = Demo() demo.show() sys.exit(app.exec_())级联和冲突: 两个选择器包含相同控件,而同一样式设置了不同属性时,以特异性更强的为准;如果选择器的特异性相同,取后者 【特异性:对选择器和样式来说,谁包含的属性项多,谁的特异性就强】 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |